<template>
  <quill-editor
    :value="value"
    :options="options"
    @blur="onEditorBlur($event)"
    @focus="onEditorFocus($event)"
    @ready="onEditorReady($event)"
    @input="onInput"
  ></quill-editor>
</template>

<script>
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
import { quillEditor } from 'vue-quill-editor'
import hljs from 'highlight.js'

export default {
  name: 'HtmlEditor',
  components: { quillEditor },
  props: {
    value: {
      type: String,
      default: ''
    },
    height: {
      type: Number,
      default: 350
    }
  },
  data() {
    return {
      options: {
        theme: 'snow',
        // theme: 'bubble',
        placeholder: '请输入内容',
        modules: {
          toolbar: [
            ['bold', 'italic', 'underline', 'strike'],
            ['blockquote', 'code-block'],
            [{ list: 'ordered' }, { list: 'bullet' }],
            ['link', 'image', 'video'],
            ['clean']
          ],
          syntax: {
            highlight: (text) => hljs.highlightAuto(text).value
          }
        }
      }
    }
  },
  mounted() {},
  methods: {
    onEditorBlur(editor) {
      this.$emit('blur', editor)
    },
    onEditorFocus(editor) {
      this.$emit('focus', editor)
    },
    onEditorReady(editor) {
      this.$emit('ready', editor)
    },
    onInput(_value) {
      this.$emit('input', _value)
    }
  }
}
</script>

<style scoped></style>
